
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title>账号管理</title>
	<meta name="renderer" content="webkit"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="format-detection" content="telephone=no"/>
    
    <link rel="stylesheet" href="/static/admins/layui/css/layui.css?v=1" media="all" />
    <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
    
</head>
<body class="childrenBody">
    <form class="layui-form" style="width: 70%;">
        <table class="layui-table"><tbody>
                <tr >
                    <td  >
                        <div >0</div>
                    </td>
                    <td >
                        <div >名字0</div>
                    </td>
                    <td >
                        <div></div>
                    </td>
                    <td >
                    操作
                    </td>
                </tr>
            
            </tbody>
        </table>
        <table class="layui-table" style="margin-top: 80px;">
            <thead>
                <tr>
                    <th>ID</th>
                    <th>名称</th>
                    <th>角色</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody class="JS_drag_table">                
                <tr  >
                    <td  >
                        <div >0</div>
                    </td>
                    <td >
                        <div >名字0</div>
                    </td>
                    <td >
                        <div></div>
                    </td>
                    <td >
                    操作
                    </td>
                </tr>
                   <tr >
                    <td  >
                        <div >1</div>
                    </td>
                    <td >
                        <div >名字1</div>
                    </td>
                    <td >
                        <div></div>
                    </td>
                    <td >
                    操作
                    </td>
                </tr>
                   <tr >
                    <td  >
                        <div >2</div>
                    </td>
                    <td >
                        <div >名字2</div>
                    </td>
                    <td >
                        <div></div>
                    </td>
                    <td >
                    操作
                    </td>
                </tr>
                  <tr >
                    <td  >
                        <div >3</div>
                    </td>
                    <td >
                        <div >名字3</div>
                    </td>
                    <td >
                        <div></div>
                    </td>
                    <td >
                    操作
                    </td>
                </tr>
                <tr class="JSe-drag-preShow" >
                    <td  colspan="9" >
                        <span>1</span>
                    </td>
                </tr>
                  <tr >
                    <td  >
                        <div >5</div>
                    </td>
                    <td >
                        <div >名字5</div>
                    </td>
                    <td >
                        <div></div>
                    </td>
                    <td >
                    操作
                    </td>
                </tr>
            </tbody>
        </table>
    </form>

<style>
.layui-table tr{
    transition: all 0s !important; 
    -webkit-transition: all 0s !important;
}


.JSe-drag-li{
    height: 40px;
    position: absolute;
    background-color: #FFF;
}

.JSe-drag-li td{
    position: relative;
    padding: 9px 15px;
    min-height: 20px;
    line-height: 20px;
    font-size: 14px;
    width: 1%;
}
.JSe-drag-preShow{
    height: 40px;
    
}
.JSe-drag-preShow td{
    padding: 0px;
}
.JSe-drag-preShow span{
    margin-left: 4%;
    background: #E6FFFF;
    height: 100%;
    width: 96%;
    display: inline-block;
    border: dashed;
    border-width: 1px;
    border-color: palegreen;
}

</style>
<script>




//拖拽
var drag = {

    class_name : null,  //允许放置的容器
	permitDrag : false,	//是否允许移动标识

	_x : 0,             //节点x坐标
    _y : 0,			    //节点y坐标
    _left : 0,          //光标与节点坐标的距离
    _top : 0,           //光标与节点坐标的距离

    old_elm : null,     //拖拽原节点
    tmp_elm : null,     //跟随光标移动的临时节点
    new_elm : null,     //拖拽完成后添加的新节点

    //初始化
    init : function (className){

        //允许拖拽节点的父容器的classname(可按照需要，修改为id或其他)
        drag.class_name = className;

        //监听鼠标按下事件，动态绑定要拖拽的节点（因为节点可能是动态添加的）
        $('.' + drag.class_name).on('mousedown', 'tr', function(event){
            //当在允许拖拽的节点上监听到点击事件，将标识设置为可以拖拽
            drag.permitDrag = true;
            //获取到拖拽的原节点对象
            drag.old_elm = $(this);
            //执行开始拖拽的操作
            drag.mousedown(event);
            return false;
        });

        //监听鼠标移动
        $(document).mousemove(function(event){
            //判断拖拽标识是否为允许，否则不进行操作
            if(!drag.permitDrag) return false;
            //执行移动的操作
            drag.mousemove(event);
            return false;
        });

        //监听鼠标放开
        $(document).mouseup(function(event){
            //判断拖拽标识是否为允许，否则不进行操作
            if(!drag.permitDrag) return false;
            //拖拽结束后恢复标识到初始状态
            drag.permitDrag = false;
            //执行拖拽结束后的操作
            drag.mouseup(event);
            return false;
        });

    },

	//按下鼠标 执行的操作
	mousedown : function (event){

		console.log('我被mousedown了');
        //1.克隆临时节点，跟随鼠标进行移动
        drag.tmp_elm = $(drag.old_elm).clone();
        drag.tmp_elm.addClass('JSe-drag-li');
        var old_elm_width =  $(drag.old_elm).width();
        //2.计算 节点 和 光标 的坐标
        drag._x = $(drag.old_elm).offset().left;
        drag._y = $(drag.old_elm).offset().top;

        var e = event || window.event;
        drag._left = e.pageX - drag._x;
        drag._top = e.pageY - drag._y;

        //3.修改克隆节点的坐标，实现跟随鼠标进行移动的效果
        $(drag.tmp_elm).css({
            'width'  : old_elm_width,
            'position' : 'absolute',
            //'background-color' : '#FF8C69',
            
            'left' : drag._x,
            'top' : drag._y,
        });

        //4.添加临时节点
        tmp = $(drag.old_elm).parent().append(drag.tmp_elm);
        drag.tmp_elm = $(tmp).find(drag.tmp_elm);
        $(drag.tmp_elm).css('cursor', 'move');

	},

	//移动鼠标 执行的操作
	mousemove : function (event){

		console.log('我被mousemove了');
       // console.log(drag);
        //2.计算坐标
        var e = event || window.event;
        var x = e.pageX - drag._left;
        var y = e.pageY - drag._top;
        var maxL = $(document).width() - $(drag.old_elm).outerWidth();
        var maxT = $(document).height() - $(drag.old_elm).outerHeight();
      //  console.log( {'x':x,'y':y,'ex':e.pageX,'ey':e.pageY});
        //不允许超出浏览器范围
        
        x = x < 0 ? 0: x;
        x = x > maxL ? maxL: x;
        y = y < 0 ? 0: y;
        y = y > maxT ? maxT: y;
        
        //3.修改克隆节点的坐标
        $(drag.tmp_elm).css({
            'left' : x,
            'top' : y,
        });
        /*
        //判断当前容器是否允许放置节点
        $.each($('.' + drag.class_name + 'tr'), function(index, value){

            //获取容器的坐标范围 (区域)
            var box_x = $(value).offset().left;     //容器左上角x坐标
            var box_y = $(value).offset().top;      //容器左上角y坐标
            var box_width = $(value).outerWidth();  //容器宽
            var box_height = $(value).outerHeight();//容器高
            
            //给可以放置的容器加背景色
            if(e.pageX > box_x && e.pageX < box_x-0+box_width && e.pageY > box_y && e.pageY < box_y-0+box_height){

                //判断是否不在原来的容器下（使用坐标进行判断：x、y任意一个坐标不等于原坐标，则表示不是原来的容器）
                if($(value).offset().left !== drag.old_elm.parent().offset().left 
                || $(value).offset().top !== drag.old_elm.parent().offset().top){
                    
                    $(value).css('background-color', '#FFEFD5');
                }
            }else{
                //恢复容器原背景色
                $(value).css('background-color', '#FFFFF0');
            }

        });*/

	},

    //放开鼠标 执行的操作
    mouseup : function (event){

        console.log('我被mouseup了');
        //移除临时节点
        $(drag.tmp_elm).remove();

        //判断所在区域是否允许放置节点
        var e = event || window.event;

        $.each($('.' + drag.class_name + 'tr'), function(index, value){

            //获取容器的坐标范围 (区域)
            var box_x = $(value).offset().left;     //容器左上角x坐标
            var box_y = $(value).offset().top;      //容器左上角y坐标
            var box_width = $(value).outerWidth();  //容器宽
            var box_height = $(value).outerHeight();//容器高
            
            //判断放开鼠标位置是否想允许放置的容器范围内
            if(e.pageX > box_x && e.pageX < box_x-0+box_width && e.pageY > box_y && e.pageY < box_y-0+box_height){

                //判断是否不在原来的容器下（使用坐标进行判断：x、y任意一个坐标不等于原坐标，则表示不是原来的容器）
                if($(value).offset().left !== drag.old_elm.parent().offset().left 
                || $(value).offset().top !== drag.old_elm.parent().offset().top){
                    //向目标容器添加节点并删除原节点
                    tmp = $(drag.old_elm).clone();
                    var newObj = $(value).append(tmp);
                    $(drag.old_elm).remove();
                    //获取新添加节点的对象
                    drag.new_elm = $(newObj).find(tmp);
                }
            }
            //恢复容器原背景色
            $(value).css('background-color', '#FFFFF0');
        });

    },

};

drag.init('JS_drag_table');

</script> 
</body>
</html>